<template>
    <el-row>
        <el-col :span="12" class="left">
            <div>
                <h1>{{ flag ? '登录' : '注册' }}界面</h1>
                <p>matrix-China是整合多个技术文档而构成的文档博客平台,是一个轻量级的多技术网络文档平台,满足您懒得翻技术文档的需求</p>
                <el-link @click="flag = !flag" type="primary">点击{{ flag ? '注册' : '登录' }}</el-link>
            </div>
        </el-col>
        <el-col :span="12" class="right">
            <el-form :model="form">
                <el-form-item label="账号" v-if="true">
                    <el-input v-model="form.username" placeholder="用户名/邮箱" />
                </el-form-item>

                <el-form-item label="密码" v-if="true">
                    <el-input v-model="form.password" placeholder="密码" />
                </el-form-item>

                <el-form-item label="密码" v-if="!flag">
                    <el-input v-model="form.Clone" placeholder="password again." />
                </el-form-item>

                <el-form-item label="邮箱" v-if="!flag">
                    <el-input v-model="form.mail" placeholder="163邮箱">
                        <template #append>
                            <el-button type="success" @click="getCode()"></el-button>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item label="验证码" v-if="validFlag">
                    <el-input v-model="form.validCode" placeholder="163邮箱">

                    </el-input>
                </el-form-item>

                <el-form-item class="btn">
                    <el-button type="primary" @click="onSubmit">login</el-button>
                    <el-button @click="reset">reset</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>

</template>


<script setup>
import { ref, reactive } from "vue";
import { login, validCode } from "../../api/index.js";
import { ElNotification } from 'element-plus';
import { useRouter } from "vue-router";

const router = useRouter();

//当前页面状态,true为登录,false为注册
const flag = ref(true);

const validFlag = ref(false);

const form = reactive({//表单
    username: '',
    password: '',
    Clone: '',
    mail: '',
    validCode: ''
});

const valid = ref('');

const onSubmit = () => {//登录/注册
    if (flag.value) {
        login(form).then(({ data }) => {//登录

            localStorage.setItem('matrix-userInfo', JSON.stringify(data.data.userInfo));

            localStorage.setItem('matrix-token', data.data.token);

            router.push('/');

            ElNotification({
                title: 'Success',
                message: '登录成功!',
                type: 'success',
            })
        })
    } else {//注册
        if (form.validCode !== valid.value) {
            ElNotification({
                title: 'Error',
                message: '验证码错误!',
                type: 'error',
            })
            return;
        }

        if (form.mail.indexOf('@') !== -1) {
            form.mail = form.mail;
        } else {
            form.mail = form.mail + '@163.com';
        }
        if (form.username === '' || form.password === '' || form.mail === '' || form.Clone === '') {
            ElNotification({
                title: 'Error',
                message: '请输入完整信息!',
                type: 'error',
            })
            return;
        }

        if (form.password !== form.Clone) {
            ElNotification({
                title: 'Error',
                message: '密码不一致!',
                type: 'error',
            })
            return;
        }

        console.log(form);
        console.log('注册');
    }

}

const reset = () => {// 重置
    form.username = '';
    form.password = '';
}

const getCode = () => { //获取验证码
    if (form.mail.indexOf('@') !== -1) {
        form.mail = form.mail;
    } else {
        form.mail = form.mail + '@163.com';
    }
    validCode({ mail: form.mail }).then(({ data })=>{
        valid.value = data.data;
        validFlag.value = true;
    })
}
</script>


<style scoped lang="less">
.el-row {
    height: 100%;

    .left {
        background-color: #155e75;
        color: #ffffff;
        font-size: 30px;
        display: flex;
        justify-content: center;
        align-items: center;

        div {
            text-align: center;

            p {
                font-size: 15px;
            }
        }

    }

    .right {
        background-color: #fff;
    }

    .el-col {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;

        .el-form {
            width: 60%;

            .el-form-item {
                width: 100%;

                input {
                    width: 100%;
                    height: 50px;
                }
            }

            .el-button {
                width: 48%;
                height: 6vh;
            }
        }
    }
}
</style>